const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html文件编译的打包插件
const ExtractTextPlugin = require('extract-text-webpack-plugin') // 单独把css 文件分离打包


module.exports = {
  entry: './src/index.js', // 配置文件入口，可配置多入口 如 entry:{ 'xxx.js', 'yyy.js'}

  output: { // 配置文件出口  可配置多个入口生成不同文件
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },

  module: {
    // rules中 是 文件编译使用多 loader 处理多种文件格式的机制
    rules: [{
        test: /\.jsx?/, // 支持js & jsx
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: 'babel-loader',
      },
      // css 插件
      {
        test: /\.css/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader', // 会将 css-loader解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效
          'css-loader', // 负责解析CSS代码主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明
        ],
      },
      // 图片处理插件
      {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'file-loader', // 增加图片类型文件的解析配置.  直接输出文件，把构建后的文件路径返回
          options: {},
        }, ],
      },
    ]
  },


  // 代码模块路径解析的配置
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, 'src')
    ],

    extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"], // 引用文件的后缀可省略，如 .vue .css .json等等
    // 这里的顺序代表匹配后缀的优先级，例如对于 index.js 和 index.jsx，会优先选择 index.js
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'src/index.html', // 配置输出文件名称
    }),
    // 引入插件，配置文件名，这里同样可以使用 [hash]
    new ExtractTextPlugin('index.css'),
  ],


}